<template>
    <div>
<div class="bigipt">
    <div><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in listImg" :key="item.id">
    <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
</van-swipe-item>
</van-swipe>
</div>
<div class="icon">
    <van-search
  show-action
  label="上海"
   background="rgba(0,0,0,0)"
  placeholder="请输入搜索关键词"
>
  <template #action>
    <div @click="onSearch"><van-icon name="location-o" color="#fff"/></div>
  </template>
</van-search>
</div>
</div>
<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>
<div class="zfquyu">
     <div class="zf">
        <h4>租房小组</h4>
        <p>更多</p>

    </div>
    <div>
        <ul class="ul">
            <li class="li" v-for="item in listgroups" :key="item.id">
                <div class="div1">
                    <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
                <div class="div2"><p>{{item.title}}</p>
                <span>{{item.desc}}</span></div>
                </div>
            </li>
        </ul>
    </div>
</div>
    </div>
   
</template>

<script>
import request from '@/utils/request';
export default {
  name:"InDex",
    props: {

    },
    data() {
        return {
listImg:[],
listgroups:[],

        };
    },
    computed: {

    },
    created() {
this.Swiper(),
this.Groups()
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        onSearch(){

        },
 async Swiper(){
  const {data}= await request({
        url:"/home/swiper",
    })
    console.log(data.body);
    this.listImg=data.body
},
async Groups(){
const {data}=await request({
    url:"/home/groups"
})
console.log(data.body);
this.listgroups=data.body
}
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.icon{
    position: fixed;
    top: 10px;
  left: 30px;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    // background-color: #39a9ed;
    img{
        width: 100%;
    }
  }
  .zfquyu{
    background-color:#f6f5f6;
    .li{
    justify-content: space-between;

    }
  }
  .zf{
    display: flex;
    justify-content: space-between;
    align-items: center;

//   margin-left: 200px;
  }
.div1{
    display: flex;
    justify-content: space-between;
    img{
        width: 45%;
    }

}
.ul{
    display: flex;
 flex-wrap: wrap;
   
}
.li{
    width: 46%;
    background-color: #fff;
    margin-right: 5px;
    margin-left: 5px;
  .div2{
    font-size: 12px;
   margin-right: 5px;
  } 
}
</style>
